<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理案例</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input id="username" type="text" placeholder="请输入账号..."/>
        &nbsp;&nbsp;
        <input id="password" type="password" placeholder="请输入密码..."/>
        &nbsp;&nbsp;
        <button id="addBtn" type="button">添加</button>
    </div>
    <div>
        <table id="list">
            <tr>
                <th style="width: 70px"><input id="allCheck" type="checkbox"/>全选</th>
                <th>账号</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="userCheck"/></td>
                <td>zhangsan</td>
                <td>123456</td>
                <td><a href="JavaScript:void(0)" onclick="drop(this)">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="userCheck"/></td>
                <td>lisi</td>
                <td>654321</td>
                <td><a href="JavaScript:void(0)" onclick="drop(this)">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="userCheck"/></td>
                <td>wangwu</td>
                <td>123441</td>
                <td><a href="JavaScript:void(0)" onclick="drop(this)">删除</a></td>
            </tr>
        </table>
        <div>
            <tr>
                <td colspan="4" style="text-align: left">
                    <a id="reverseCheck" href="JavaScript:void(0)">反选</a>
                    <a id="deleteChecked" href="JavaScript:void(0)">删除已选</a>
                </td>
            </tr>
        </div>
    </div>
</body>
<script src="js/main.js"></script>
</html>